<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页</title>
</head>
<body>
<div>
    <h2>网页加载中</h2>
    <video id="video"></video>
    <canvas id="canvas"></canvas>
    <span></span>
    <!--  <canvas id="canvas" style="display: none"></canvas>-->
    <script>
        const width = 480;
        const height = 320;
        const video = document.getElementById('video');

        //访问摄像头
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //调用用户媒体设备, 访问摄像头
            getUserMedia({video: {width: width, height: height}}, success, error);
        } else {
            alert('不支持访问用户媒体');
        }

        //访问用户媒体设备的兼容方法
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新的标准API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit核心浏览器
                navigator.webkitGetUserMedia(constraints, success, error)
            } else if (navigator.mozGetUserMedia) {
                //firfox浏览器
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                //旧版API
                navigator.getUserMedia(constraints, success, error);
            }
        }
        //成功回调
        function success(stream) {
            console.log('成功');
            //兼容webkit核心浏览器
            // const CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            // video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
            drawCanvasImage();
            // setInterval(drawCanvasImage, 1000)
        }

        //失败回调
        function error(error) {
            console.log('失败');
            console.log("访问用户媒体设备失败", error);
        }


        function sendToBack2(data){
            var httpRequest = new XMLHttpRequest();
            let url="http://localhost:8084/video/hello";
            let data1={'data':"nice to meet you"};
            console.log("data1.data数据",JSON.stringify(data1));
            httpRequest.open("POST",url,true);
            httpRequest.setRequestHeader("Content-Type","application/json");
            httpRequest.send(data1);
            httpRequest.onreadystatechange = ()=>{
                // if(httpRequest.readyState == 4 && httpRequest.status == 200){
                //     var data = JSON.parse(httpRequest.responseText);
                //     console.log(data);
                // }
            }

        }
        function drawCanvasImage() {
            const canvas = document.getElementById('canvas');
            canvas.width = width;
            canvas.height = height;
            const context = canvas.getContext('2d');
            context.drawImage(video, 0, 0, width, height, 0, 0, width, height);
            //获取图片，数据格式为base64
            const imageData = canvas.toDataURL("image/png");
            console.log("发请求")
            sendToBack2(imageData);
            // console.log(imageData)
        }




        function sendToBack (data){
            // $.post("http://face.free.svipss.top/video/hello",{"file":data},function(result){
            //     $("span").html(result);
            // });
        }
    </script>
<!--    <script src="https://code.jquery.com/jquery-3.1.1.min.js"/>-->
</div>
</body>
</html>
